<template>
  <el-row :gutter="20" style="padding: 20px;">
    <!-- 用户信息 -->
    <el-col :span="6">
      <el-card shadow="hover" style="height: 200px;">
        <h3>用户信息</h3>
        <p><strong>用户名：</strong>{{ userInfo.username }}</p>
        <p><strong>邮箱：</strong>{{ userInfo.email }}</p>
        <p><strong>手机号：</strong>{{ userInfo.phone || '未填写' }}</p>
      </el-card>
    </el-col>

    <!-- 今日心情 -->
    <el-col :span="6">
      <el-card shadow="hover" style="height: 200px;">
        <h3>今日心情</h3>
        <p v-if="todayMood">
          <span style="font-size: 2em;">{{ todayMood.mood }}</span><br />
          {{ todayMood.note || '暂无内容' }}<br />
          <small>{{ formatDate(todayMood.mood_date) }}</small>
        </p>
        <p v-else>暂无心情记录</p>
      </el-card>
    </el-col>

    <!-- 今日课程安排 -->
    <el-col :span="6">
      <el-card shadow="hover" style="height: 200px; overflow-y: auto;">
        <h3>今日课程安排</h3>
        <ul v-if="todayCourses.length > 0">
          <li v-for="course in todayCourses" :key="course.courseId">
            <strong>{{ course.course_name }}</strong> - {{ course.course_time }}<br />
            <small>{{ course.location }}</small>
          </li>
        </ul>
        <p v-else>今日无课程</p>
      </el-card>
    </el-col>

    <!-- 今日财务提醒 -->
    <el-col :span="6">
      <el-card shadow="hover" style="height: 200px; overflow-y: auto;">
        <h3>今日财务提醒</h3>
        <ul v-if="todayFinance.length > 0">
          <li v-for="record in todayFinance" :key="record.recordId">
            {{ record.category }}：¥{{ record.amount }} - {{ record.description }}
          </li>
        </ul>
        <p v-else>今日无财务记录</p>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserById } from '@/api/user';
import { getMoodDiariesByUserId } from '@/api/mood';
import { getCoursesByUserId } from '@/api/course';
import { getFinanceRecordsByUserId } from '@/api/finance';

const userId = 1; // 这里模拟当前用户ID，实际可根据登录动态传入

const userInfo = ref({});
const todayMood = ref(null);
const todayCourses = ref([]);
const todayFinance = ref([]);

// 格式化日期为 YYYY-MM-DD
function formatDate(dateStr) {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  return d.toLocaleDateString();
}

// 判断课程时间或记录日期是否为今天
function isToday(dateStr) {
  const today = new Date('2024-06-01T00:00:00'); // 使用00:00:00确保时间一致
  const d = new Date(dateStr);
  return (
      d.getFullYear() === today.getFullYear() &&
      d.getMonth() === today.getMonth() &&
      d.getDate() === today.getDate()
  );
}

async function loadUserInfo() {
  userInfo.value = await getUserById(userId);
}

async function loadTodayMood() {
  const moods = await getMoodDiariesByUserId(userId);
  console.log("mood",moods)
  if (moods && moods.length > 0) {
    // 取最近一条，且日期是今天的
    todayMood.value = moods.find(m => isToday(m.moodDate)) || moods[moods.length - 1];
  }
}

async function loadTodayCourses() {
  const courses = await getCoursesByUserId(userId);
  console.log("course:",courses)
  if (courses) {
    // 简单用课程时间字段判断是否是今天（实际项目中课程时间应有详细字段）
    todayCourses.value = courses.filter(c => {
      // 你可以根据课程时间字段格式做更复杂判断，这里假设包含今天日期
      return isToday(c.course_time);
    });
  }
}

async function loadTodayFinance() {
  const finance = await getFinanceRecordsByUserId(userId);
  if (finance) {
    todayFinance.value = finance.filter(f => isToday(f.recordDate));
  }
}

onMounted(() => {
  loadUserInfo();
  loadTodayMood();
  loadTodayCourses();
  loadTodayFinance();
});
</script>
